<template>
  <div>
    <!-- 用户排名分页区 -->
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-row>

    <!-- 用户排名表格 -->
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="spanconent"></div>
      </el-col>

      <el-col :span="16">
        <el-card>
          <div slot="header" class="clearfix " align="left">
            <span><i class="el-icon-s-data"></i>用户排名</span>
          </div>
          <!-- 表格排名数据 -->
          <el-table :data="rankData" style="width: 100%" border stripe>
            <el-table-column
              type="index"
              label="#"
              width="60"
            ></el-table-column>
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="email" label="邮箱" width="250">
            </el-table-column>
            <el-table-column prop="acCount" label="Ac数量">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="4">
        <div class="spanconent"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
       // 排名数据
       rankData:[
           
       ],
      // 分页数据
      pageParam: {
        pageSize: 5,
        pageNo: 1,
        param: {

        }
      },
      // 总共条数
      total: 0,
    };
  },
  methods: {
    handleSizeChange(newSize) {
      this.pageParam.pageSize = newSize;
      this.getRankList();
    },
    handleCurrentChange(newNum) {
      this.pageParam.pageNo = newNum;
      this.getRankList();
    },
    // 获取用户排名分页数据
    async getRankList(){

        const {data:res} = await this.$http.post('rank/page',this.pageParam);
        
        if(res.meta.code !== 200){
            return this.$message.error('获取用户排名失败')
        }

        this.rankData = res.data.records;
        this.total = res.data. total;
        console.log(res)

    }
  },
  created() {
      this.getRankList()
  },
};
</script>

<style></style>
